<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>会议纪要</h1>
    <div id="div1"></div>
    <button onclick="setJsonOne()">setJSON</button>
    <button onclick="setJsonTwo()">setJSON（自定义 JSON）</button>
    <button onclick="getJson()">getJSON</button>
    <button onclick="setTable()">setJSON Table</button>
    <script src="../../layuiadmin/modules/wangEditor.min.js"></script>
    <script>
      const E = window.wangEditor;
      const editor = new E("#div1");
      editor.config.onchange = function (newHtml) {
        console.log("onchange", newHtml);
      };
      // 设置编辑区域高度为 500px
      editor.config.height = 500;
      editor.create();

      console.log(editor.txt.getJSON());
      let myJson = editor.txt.getJSON();

      function getJson() {
        myJson = editor.txt.getJSON();
        console.log(myJson, JSON.stringify(myJson));
      }

      function setJsonOne() {
        console.log(myJson);
        editor.txt.setJSON(myJson);
      }

      function setJsonTwo() {
        editor.txt.setJSON([
          {
            tag: "p",
            attrs: [],
            children: [
              "欢迎使用 ",
              {
                tag: "b",
                attrs: [],
                children: ["wangEditor"],
              },
              " 富文本编辑器",
            ],
          },
          {
            tag: "p",
            attrs: [],
            children: [
              {
                tag: "img",
                attrs: [
                  { name: "src", value: "xxx.png" },
                  { name: "style", value: "max-width:100%;" },
                ],
                children: [],
              },
            ],
          },
        ]);
      }
    </script>
  </body>
</html>
